<template>
    <div class="container">
        <div v-for="(item, index) in list" :key="index" class="userItem">
            <div class="icon">
                <el-icon v-if="item.iconStatus" color="#48bd86">
                    <SuccessFilled />
                </el-icon>
                <el-icon v-else color="#efa957">
                    <WarningFilled />
                </el-icon>
                <span class="title">{{ item.title }}</span>
            </div>
            <div class="value"> {{ getEncryptionInfo(item.type, item.info) }}</div>
            <div class="action" @click="jump(item.url, item.type)">{{ item.action }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { SuccessFilled, WarningFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store';
import { storeToRefs } from 'pinia';
import { getEncryptionInfo } from '@/Util'
const router = useRouter()
interface List {
    title: string;
    info: string;
    action: string;
    type: string;
    iconStatus: string;
    url: string
}
const list = reactive<List[]>([])
onBeforeMount(() => {
    list.push({
        title: '绑定微信账号',
        info: '未绑定微信账号',
        action: '绑定微信',
        type: 'wechat',
        iconStatus: '',
        url: ''
    }, {
        title: '设置密码',
        info: '已设置',
        action: '修改密码',
        type: 'password',
        iconStatus: '-',
        url: '/home/changeImpMsg'
    }, {
        title: '我的邮箱',
        info: user.value.email,
        action: '更换邮箱',
        type: 'email',
        iconStatus: user.value.email,
        url: '/home/changeImpMsg'
    })
})
const User = useUserStore()
let { user } = storeToRefs(User);
let jump = (url: string, type: string) => {
    if (url) {
        router.push({
            path: url,
            query: { type }
        })
    } else {
        ElMessage.info('暂不支持该功能哦~')
    }
}
</script>


<style scoped lang="less">
.container {
    padding: 50px 50px;

    .userItem {
        display: flex;
        height: 80px;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #ccc;

        &:last-child {
            border-bottom: 1px solid #ccc;
        }

        .icon {
            width: 150px;
            display: flex;
            align-items: center;

            .title {
                margin-left: 5px;
            }
        }

        .value {
            font-size: 12px;
            color: #6d757a;
        }

        .action {
            cursor: pointer;
            font-size: 12px;
            color: #00a1d6;
            user-select: none;
        }
    }
}
</style>